<template>
  <div>
    <div class="all-bg">
      <div>
        更新日期: {{`${(new Date().getMonth()+1) > 9 ? (new Date().getMonth()+1) : `0${new Date().getMonth()+1}`}月${(new Date().getDate()) > 9 ? new Date().getDate() : `0${new Date().getDate()}`}日`}}
      </div>
    </div>
    <section>
      <div class="hot-music-list" v-for="(item,index) in this.$store.state.hotMusic">
        <div>{{index+1}}</div>
        <div>
          <p>{{item.name}}</p>
          <p>{{`${item.song.artists[0].name}-${item.name}`}}</p>
        </div>
        <div>
          <span></span>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export  default {
    data(){
      return {
        
      }
    },
    mounted(){
      this.$store.dispatch('hot_music')
    }
  }
</script>
<style>
.all-bg{
  background-image: url('http://s3.music.126.net/m/s/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee');
  padding-top: 38.9%;
  background-size: contain;
  position: relative;
  overflow: hidden;
}
.all-bg>div{
  background-image: url('http://s3.music.126.net/m/s/img/index_icon_3x.png?49a82fee3e0fc602e9c8b25df2bda159');
  background-repeat: no-repeat;
  background-size: 166px 97px;
  position: absolute;
  top: -22px;
  left: -10px;
  padding-top: 30.9%;
  padding-left: 7%;
  width: 100%;
  color: #fff;
}
.hot-music-list{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10px 0;
}
.hot-music-list>div>p{
  margin: 0;
  padding: 0;
}
.hot-music-list>div:nth-child(1){
  text-align: center;
  flex: 2;
}
.hot-music-list>div:nth-child(2){
  text-align: left;
  flex: 6;
}
.hot-music-list>div:nth-child(2)>p:nth-child(2){
  color: #888;
}
.hot-music-list>div:nth-child(3){
  text-align: center;
  flex: 2;
}
.hot-music-list>div:nth-child(3)>span{
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url(//s3.music.126.net/m/s/img/index_icon_3x.png?49a82fee3e0fc602e9c8b25df2bda159);
  background-position: -24px 0;
  background-size: 166px 97px;
  vertical-align: middle;
}
</style>
